{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录 | 注册</title>
    <link rel="shortcut icon" type="images/x-icon" href="{% static 'blog/cat_0.ico'%}" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_9o8c1iysrsu.css">
    <link rel="stylesheet" href="{% static 'blog/css/login.css'%}">
    <script type="text/javascript" src="{% static 'blog/js/jquery.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/login.js'%}"></script>
</head>
<body>
    <div class="canvas1"></div>
    <div class="canvas2"></div>
    <div class="sakura-box">
        <div class="sakura float-Sakura"></div>
        <div class="light-bg scale-Sakura"></div>
    </div>
    <div class="premise">似縂為、春將去</div>
    <main class="">
        <div class="box">
            <div class="card">
                <div class="card-title">-登錄-</div>
                <div class="discript">
                    西窗下，風搖翠竹，疑是故人來。<br>
                    過眼年華，動人幽意，相逢幾番春換。
                </div>
            </div>
            <div class="glass"></div>
            <div class="glass"></div>
            <div class="card-fake"></div>
            <form class="login-form" id="comment_form" action="/" novalidate>
                <div class="inputBox">
                    <input type="text" id="login-email" name="" required="required">
                    <span>-邮箱/用户名-</span>
                </div>
                <div class="inputBox">
                  <input type="password" id="login-password" name="" required="required"  style=" font-family:Wingdings;" οncοpy="return false" oncut="return false" οnpaste="return false">
                  <span>-密码-</span>
                </div>
                <button class="my-login" type="button">-LOGIN-</button>
            </form>
            <form class="regis-form" id="comment_form" action="/" novalidate>
                {{ csrf_token }}
                <div class="form-placeholder"></div>
                <div class="inputBox">
                    <input type="text" id="new-name" name="" required="required">
                    <span>-昵称-</span>
                </div>
                <div class="inputBox">
                    <input type="text" id="new-qq" class="" required="required">
                    <span>-QQ-</span>
                </div>
                <div class="inputBox">
                    <input type="text" id="new-url" class="btn-hidden" required="required" value="https://baidu.com">
                    <span>-您的网站-</span>
                </div>
                <div class="inputBox">
                    <input type="text" id="new-email" name="" required="required">
                    <span>-邮箱-</span>
                </div>
                <div class="inputBox">
                    <input type="password" id="new-password1" name="" required="required" style=" font-family:Wingdings;" οncοpy="return false" oncut="return false" οnpaste="return false">
                    <span>-密码-</span>
                </div>
                <div class="inputBox">
                    <input type="password" id="new-password2" name="" required="required" style=" font-family:Wingdings;" οncοpy="return false" oncut="return false" οnpaste="return false">
                    <span>-确认密码-</span>
                </div>
                <div class="inputBox">
                    <input type="text" id="new-code"  name="" required="required"  οncοpy="return false" oncut="return false" οnpaste="return false" value="">
                    <span></span>
                </div>
                <button class="my-regis" type="button">-REGIS-</button>
                <div class="form-placeholder"></div>
            </form>
        </div>
    </main>
</body>
<footer>
    <script>
        $(document).ready(function(){
            var max=myCount(auth_code)-1 ;
            parseInt(Math.random()*(max+1),10);
            var cur_index = Math.floor(Math.random()*(max+1));
            $("#new-code").val(auth_code[cur_index]["pro"]) ;
            $("#new-code ~ span").text("-补全"+auth_code[cur_index]["tip"]+"，证明你是机器人-") ;
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
            });
            $(".my-login").click(function () {
                var login_email = $("#login-email").val();  
                var login_password = $("#login-password").val();  
                var curUrl="{% url 'blog:login_user' %}" ;
                $.ajax({
                   type:"POST",
                   data: { 
                           email:login_email,
                           password:login_password
                          },
                   url: curUrl, 
                   //这里用的是static url 需要与urls.py中的name一致
                   cache: false,
                   dataType: "html",
                   success: function(result, status, xml) {
                        if (result) {
                            var jsonData = JSON.parse(result);
                            $("#login-password ~ span").text(jsonData['message']) ;
                            //window.location.reload() ;
                        } else {
                            window.location = "{% url 'blog:index' %}"
                        }
                    },
                    error: function(xhr, textStatus, errorThrown){
                        alert("error:pls call the admin "+xhr.responseText);
                    }
                  });
                return false ;
            }) ;
            $(".my-regis").click(function () {
                var name = $("#new-name").val() ;
                var qq = $("#new-qq").val() ;
                var url = $("#new-url").val() ;
                var email = $("#new-email").val();  
                var password1 = $("#new-password1").val();  
                var password2 = $("#new-password2").val();  
                var code = $("#new-code").val() ;
                var new_picurl="https://q1.qlogo.cn/g?b=qq&nk="+qq+"&s=100" ;
                var index=cur_index ;
                var code_status = false ;
                var curUrl="{% url 'blog:register_user' %}" ;
                if (0==index) {
                    code_status=(auth_code[index]["ans"].indexOf(toR0(code))!=-1) ;
                } else {
                    code_status=(auth_code[index]["ans"]==toR0(code)) ;
                }
                if (!code_status) {
                    $("#new-code ~ span").text("验证失败") ;
                    cur_index = Math.floor(Math.random()*(max+1));
                    $("#new-code").val(auth_code[cur_index]["pro"]) ;
                    $("#new-code ~ span").text("-补全"+auth_code[cur_index]["tip"]+"，证明你是机器人-") ;
                    return false ;      
                } else {}
                if (password1!=password2){
                    $("#new-password2 ~ span").text("两次代码不一致");  
                    return false ;
                } else {}
                $.ajax({
                   type:"POST",
                   data: { 
                            name:name,
                            qqnumber:qq ,
                            url:url,
                            email:email,
                            password:password2,
                            picurl:new_picurl
                          },
                   url: curUrl, 
                   //这里用的是static url 需要与urls.py中的name一致
                   cache: false,
                   dataType: "html",
                   success: function(result, status, xml) {
                        if (result) {
                            var jsonData = JSON.parse(result);
                            $("#login-password ~ span").text(jsonData['message']) ;
                            //window.location.reload() ;
                            if (jsonData['username_error']) {
                              var temp=$("#new-name ~ span").text() ;
                              $("#new-name ~ span").text(jsonData['username_error']);
                            }
                            if (jsonData['qq_error']) {
                              var temp=$("#new-qq ~ span").text() ;
                              $("#new-qq ~ span").text(jsonData['qq_error']);
                            }
                            if (jsonData['picurl_error']) {
                              var temp=$("#new-qq ~ span").text() ;
                              $("#new-qq ~ span").text(jsonData['picurl_error']);
                            }
                            if (jsonData['url_error']) {
                              var temp=$("#new-url ~ span").text() ;
                              $("#new-url ~ span").text(jsonData['url_error']);
                            }
                            if (jsonData['email_error']) {
                              var temp=$("#new-email ~ span").text() ;
                              $("#new-email ~ span").text(jsonData['email_error']);
                            }
                        } else {
                            window.location = "{% url 'blog:login_page' %}"
                        }
                    },
                    error: function(xhr, textStatus, errorThrown){
                    	 window.location = "{% url 'blog:login_page' %}"
                        //alert("error: pls call the admin") ;
                        //alert("error:pls call the admin "+xhr.responseText);
                    }
                  });
                return false ;
            }) ;
        })
    </script>
</footer>
</html>

